<template>
	<view>
		<view class="visua_main">
			<view class="mode_trend_type">
				<u-line color="#f5f5f5" style="margin:10px 0 0px 0;"></u-line>
				<view style="width: 98%;">
					<u-tabs :list="klineData" keyName="time" @click="tabTime" lineColor="rgb(244, 75, 65)" :activeStyle="{
					        color: '#303133',
					        fontWeight: 'bold',
					        transform: 'scale(1.05)'
					    }" :inactiveStyle="{
					        color: '#606266',
					        transform: 'scale(1)'
					    }">
					
					</u-tabs>
				</view>

			</view>
		</view>
		<view id="chart-type-k-line" style="width:100%;height:180px" v-if="weekIndex===0" />
		<five-minute v-if="weekIndex===1" ref="fivdayRef" :pageLineType="pageLineType"></five-minute>
		<fifteenminute-vue v-if="weekIndex===2" ref="fifteenRef" :pageLineType="pageLineType"></fifteenminute-vue>
		<thirty-mints-vue v-if="weekIndex===3" ref="thirtyminRef" :pageLineType="pageLineType"></thirty-mints-vue>
		<onehours v-if="weekIndex===4" ref="oneHoursRef" :pageLineType="pageLineType"></onehours>
		<every-day v-if="weekIndex===5" ref="evdayRef" :pageLineType="pageLineType"></every-day>
		<FourHours v-if="weekIndex===6" ref="fourHoursRef" :pageLineType="pageLineType"></FourHours>
		<EveryMonth v-if="weekIndex===7" ref="monthRef" :pageLineType="pageLineType"></EveryMonth>
		
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import fiveMinute from '@/components/fiveMinute.vue';
	import fifteenminuteVue from '@/components/fifteenminute.vue';
	import thirtyMintsVue from '@/components/thirtyMints.vue';
	import onehours from '@/components/onehours.vue';
	import EveryDay from '@/components/everyday.vue';
	import FourHours from '@/components/fourHours.vue';
	import EveryMonth from '@/components/everymonth.vue';

	import {
		init,
		dispose,
		registerIndicator,
		getFigureClass,
		registerStyles,
		registerXAxis,
		registerYAxis
	} from 'klinecharts'
	import * as echarts from 'echarts';
	import dataall from '../../data.json'

	export default {
		name: 'HQChart',
		components: {
			fiveMinute,
			fifteenminuteVue,
			thirtyMintsVue,
			onehours,
			EveryDay,
			FourHours,
			EveryMonth
		},
		data() {
			return {
				mainIndex: 0,
				klineData: [{
						time: "分时",

					},
					{
						time: "五分",

					},
					{
						time: "15分",

					},
					{
						time: "30分",

					},
					{
						time: "1小时",
					},
					{
						time: "日K",
					},
					{
						time: '4小时'
					},
					{
						time: '月K'
					},
				],
				more: [
					// {
					// 	tiem:'1分'
					// },
					{
						tiem: '4小时'
					},
					{
						tiem: '周K'
					},
					{
						tiem: '月K'
					}
				],
				option: {

				},
				globalBgMode: 'light',

				mainIndicators: ["MA", "BOLL", "SAR"],
				subIndicoators: [{
					name: 'VOL',
					check: true
				}, {
					name: 'MACD',
					check: true
				}, {
					name: 'KDJ',
					check: true
				}, {
					name: 'RSI',
					check: false
				}, {
					name: 'WR',
					check: false
				}, {
					name: 'VR',
					check: false
				}, {
					name: 'CCI',
					check: false
				}, {
					name: 'BIAS',
					check: false
				}, {
					name: 'DMA',
					check: false
				}, {
					name: 'MTM',
					check: false
				}],
				dataSource: null,
				weekIndex: 0,
				pageLineType: 'GOLD',
				transactionData: ""
			}
		},

		onLoad(options) {
			if (options.data) {
				
				this.pageLineType = options.data===0?'伦敦金':'伦敦银'

			} else {
				this.pageLineType = 'GOLD';

			}


		},

		onHide() {

			clearInterval()
		},
		mounted() {

		},
		onShow() {
			this.initWebSocket()


			this.$nextTick(() => {


				// setInterval(() => {
				// 	setTimeout(() => {


				// 		this.getTransactionRealtimePrice()
				// 	}, 200)
				// }, 3000)
			})

		},
		beforeDestroy() {

			dispose('chart-type-k-line')
		},
		onReady() {
uni.hideTabBar()
		},

		methods: {
			getTransactionRealtimePrice() {
				var that = this;
				uni.request({
					url: 'http://103.214.167.178:9999/manager/transaction/getCurrentDateTransactionData?type=' +
						this
						.pageLineType,
					method: 'get',
					success(res) {

						if (res.data.code === 0) {
							that.transactionData = res.data.data



						}


					}
				})
			},
			getloadMoredata() {
				var that = this
				uni.request({
					url: 'http://103.214.167.178:9999/manager/transaction/kline/getTransactionRealtimePrice?type=' +
						this.pageLineType,
					method: 'get',
					timeout: 60000,
					success(res) {
						if (res.data.code === 0) {

							res.data.data[0].timestamp = that.dataSource[0].timestamp
							res.data.data[0].high = Math.max(res.data.data[0].high, res.data.data[0].close);
							res.data.data[0].low = Math.min(res.data.data[0].low, res.data.data[0].close);
							that.kLineChart.updateData(res.data.data[0]);


							setTimeout(() => {
								// that.getTransactionRealtimePrice()
								// that.getloadMoredata()
							}, 500)

						}


					}
				})
			},
			Handback() {

				// uni.navigateBack(-1)
			},
			minChartFn() {

				let kedu = [{
						coord: 30,
						text: "06: 00",
						value: 1737065239000
					},
					{
						coord: 100,
						text: "07: 00",
						value: 1737068839000
					},
					{
						coord: 188,
						text: "15: 00",
						value: 1737115200000
					},
					{
						coord: 280,
						text: "23: 00",
						value: 1737126439000
					},

				]


				registerXAxis({
					name: 'customXAxis',
					scrollZoomEnabled: false,
					createTicks: ({
						defaultTicks,
						range,
						bounding
					}) => {
					

						if (defaultTicks.length > 0) {
							// defaultTicks[3].value=1737126439000
							// defaultTicks[3].text = "23: 00"
						}
						console.log(defaultTicks);
						// defaultTicks = kedu
						console.log(range,'range');
						console.log(bounding,'bounding');
						
						return defaultTicks.map(({
							coord,
							value,
							text
						}) => {

							return {
								coord,
								value,
								text
							}
						})
					}


				});

				this.kLineChart = init("chart-type-k-line", {
					layout: [{
							type: 'xAxis',
							
							options: {
								order: 1000,
								axis: {
									scrollZoomEnabled: false,
									name: 'customXAxis',
								}
							}
						},

					]
				});
				const options = this.kLineChart.getStyles();
				console.log(options,'options');
				const dom = this.kLineChart.getDom('candle_pane', 'main');
				console.log(dom,'dom');
				this.kLineChart.setLeftMinVisibleBarCount(this.dataSource.length );
				// console.log(this.dataSource);
				this.kLineChart.setRightMinVisibleBarCount(this.dataSource.length);
				this.kLineChart.applyNewData(this.dataSource,true);


				this.kLineChart.setScrollEnabled(false);
				this.kLineChart.setZoomEnabled(false);
				this.kLineChart.isZoomEnabled(false);

				this.kLineChart.setBarSpace(1);
				// this.kLineChart.setOffsetRightDistance(100)

		// this.kLineChart.scrollByDistance(200, 200);
this.kLineChart.scrollToDataIndex(this.kLineChart.getDataList()[0], 200);
				this.kLineChart.setOffsetRightDistance(this.kLineChart.getSize('candle_pane', 'main').width - this
					.dataSource.length * 1)
const coordinates = this.kLineChart.convertToPixel(
      [{ timestamp: this.dataSource[0].timestamp, value: this.dataSource[0].high }],
      { paneId: 'candle_pane', absolute: false }
    );
				this.kLineChart.setStyles({
					candle: {
						type: 'area',
						tooltip: {
							offsetBottom: {

							},
							custom: [],
							text: {
								size: 8
							}
						},
						area: {
							lineSize: 1,
						},
						priceMark: {

						}
					},

					indicator: {
						lastValueMark: {

							show: false
						},
						tooltip: {

							offsetTop: 5,
							offsetLeft: 3,
							offsetRight: 1,
							text: {
								size: 10,
								color: "#000"
							}
						}
					}
				});


				
				


				
				


				// this.getloadMoredata()

			},
			setMainIndicator: function(name, index) {
				this.mainIndex = index;

				this.paneId = this.kLineChart.createIndicator(name, false, {
					id: "candle_pane"
				});
			},
			tabTime(e) {

				this.weekIndex = e.index;

				if (this.weekIndex === 0) {
					this.$nextTick(() => {
						this.initWebSocket()
					})


				} else if (this.weekIndex === 1) {
					this.$nextTick(() => {
						// dispose('chart-type-k-line');
						this.$refs.fivdayRef.getfiveday()
					})

				} else if (this.weekIndex === 2) {
					this.$nextTick(() => {
						this.$refs.fifteenRef.initFifteen()
					})
				} else if (this.weekIndex === 3) {
					this.$nextTick(() => {
						this.$refs.thirtyminRef.initFifteen()
					})
				} else if (this.weekIndex === 4) {
					this.$nextTick(() => {
						this.$refs.oneHoursRef.inithours()
					})
				} else if (this.weekIndex === 5) {
					this.$nextTick(() => {
						this.$refs.evdayRef.initEvDay()
					})
				} else if (this.weekIndex === 6) {
					this.$nextTick(() => {
						this.$refs.fourHoursRef.initfourHour()
					})
				} else if (this.weekIndex === 7) {
					this.$nextTick(() => {
						this.$refs.monthRef.initMonth()
					})
				}

			},
			setSubIndicator: function(item) {

				item.check = !item.check

				var dataTrue = []
				this.subIndicoators.map((item) => {
					if (item.check === true) {
						dataTrue.push(item.check)

					}

				})
				if (dataTrue.length > 3) {
					this.$refs.uToast.show({
						// type: "success",
						message: '副图最多只支持三个'
					})
					item.check = false
					return false
				}
				if (item.check) {
					this.chart.createIndicator(item.name);
				} else {
					this.chart.removeIndicator({
						name: item.name
					});
				}

				this.chart.updateData(this.dataSource);
			},
			initWebSocket() {
				var that = this
				// that.dataSource = dataall.data.chart_data;
				// console.log(that.dataSource);
				// that.dataSource.reverse();
				// dispose('chart-type-k-line')
				// that.minChartFn()
				// that.kLineChart.resize();
				// return false
				setTimeout(() => {
					console.log();
					this.dataSource = dataall.data.chart_data;
					// this.dataSource.reverse();
					dispose('chart-type-k-line')
					this.minChartFn()
					this.kLineChart.resize();
				}, 100)

				// uni.request({
				// 	url: 'http://103.214.167.178:9999/manager/transaction/kline/getKlineDataForM1?type=' +
				// 		this
				// 		.pageLineType,
				// 	method: 'get',
				// 	timeout: 60000,
				// 	success(res) {
				// 		if (res.data.code === 0) {

				// 			that.dataSource = res.data.data.chart_data;

				// 			that.dataSource.reverse();
				// 			dispose('chart-type-k-line')
				// 			that.minChartFn()
				// 			that.kLineChart.resize();
				// 		}


				// 	}
				// })





			},

		}
	}
</script>

<style>
	@import 'line.css';
</style>